<template>
  <div id="chongzhi">
    <InfoIn :trs="false">
      <template #Center> 设置密码 </template>
    </InfoIn>
    <div class="name-password">
      <div :class="{ active: active == 1 }">
        <input
          type="text"
          v-model="mobile"
          @blur="active = ''"
          @focus="active = 1"
          placeholder="手机号"
        />
        <p class="yan-zheng" @click="huoqu" v-if="yanzhengma">获取验证码</p>
        <p v-else class="yan-zheng-ma">获取验证码({{ time }})</p>
      </div>
      <div :class="{ active: active == 2 }">
        <input
          type="text"
          v-model="sms_code"
          @blur="active = ''"
          @focus="active = 2"
          placeholder="请输入短信验证码"
        />
      </div>
      <div :class="{ active: active == 3 }">
        <input
          type="password"
          v-model="password"
          @blur="active = ''"
          @focus="active = 3"
          placeholder="请输入密码"
        />
      </div>
      <div class="button">
        <button @click="xg">修改</button>
      </div>
    </div>
  </div>
</template>
  <script>
import infoIn from "@/views/infoin.vue";
import { PostSmsCode, postPassword } from "./yibu/my.js";
const res = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
const reG = /^[0-9]*$/;
export default {
  components: {
    infoIn,
  },
  data() {
    return {
      active: "",
      yanzhengma: true,
      time: 6,
      mobile: "",
      sms_code: "",
      password: "",
    };
  },
  methods: {
    async huoqu() {
      if (!res.test(this.mobile)) {
        this.$Toast("手机号格式不正确");
      } else {
        this.yanzhengma = false;
        let res = await PostSmsCode({
          mobile: this.mobile,
          sms_type: "getPassword",
        });
        // console.log(res);

        var t = setInterval(() => {
          if (this.time > 0) {
            this.time--;
          } else {
            this.time = 6;
            this.yanzhengma = true;
            clearInterval(t);
          }
        }, 1000);
      }
    },
    // 修改
    async xg() {
      if (
        res.test(this.mobile) &&
        this.sms_code.length == 6 &&
        reG.test(this.password)
      ) {
        let res = await postPassword({
          mobile: this.mobile,
          sms_code: this.sms_code,
          password: this.password,
        });
        console.log(res);
        if (res.data.code == 200 && res.data.data == true) {
          this.$router.push("/my");
        } else {
          this.$Toast(res.data.msg);
        }
      } else {
        this.$Toast("手机号或验证码或密码不正确");
      }
    },
  },
};
</script>
  <style lang="scss" scoped>
#chongzhi {
  width: 100%;
  height: 100%;
  .name-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    .active {
      border-bottom: 1px solid red;
    }
    div {
      width: 80%;
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      input {
        border: none;
      }
      .yan-zheng {
        color: rgba(255, 77, 0, 0.697);
      }
      .yan-zheng-ma {
        color: rgba(255, 77, 0, 0.697);
      }
    }
    .div1 {
      font-size: 14px;
      width: 80%;
      display: flex;
      justify-content: space-between;
      color: rgba(0, 0, 0, 0.5);
      margin-top: 5px;
    }
    .button {
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      button {
        border: none;
        border-radius: 30px;
        width: 70%;
        height: 50px;
        color: white;
        background: url("@/assets/email/login-btn.png") no-repeat 100%;
      }
    }
  }
}
</style>